<template>
	<view>
		<uni-popup ref="popup_vip" type="dialog">
			<uni-popup-dialog placeholder="请输入VIP等级"
			mode="input" title="请输入VIP等级"
			@confirm="confirm_vip" :value="temp_vip"  
			></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup_level" type="dialog">
			<uni-popup-dialog placeholder="请输入管理员等级"
			mode="input" title="请输入管理员等级 -1到14"
			@confirm="confirm_level" :value="temp_level"  
			></uni-popup-dialog>
		</uni-popup>
		
		<view class="card">
			<input class="seach" type="text" placeholder="输入id或者用户名查找" v-model="search_input" />
			<button class="small_btn" @click="search">搜索</button>
			<button class="small_btn" @click="reset">重置</button>
		</view>
		
		<view v-for="(item,i) in userList2" :key="item.id">
			<view class="card">
				<view><text>用户名：{{item.username}}</text></view>
				<text class="label">uid：{{item.uid}}</text>
				<text class="label">VIP等级：{{item.grade}}</text>
				<text class="label">管理员等级：{{item.level}}</text>
				<text class="label">空间：{{(item.usedsize/(Math.pow(1024,3))).toFixed(3)}}/{{item.size}}</text>
				<button class="small_btn" @click="change_vip(i)">修改VIP等级</button>
				<button class="small_btn" @click="change_level(i)">修改管理员等级</button>
				<button v-if="level==15" class="small_btn red" @click="delete_user(i)">删除用户</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	//  输入框
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue"
	import common from '../../common/common.js';
	export default {
		components: {
			 uniPopup, uniPopupDialog,
		},
		data() {
			return {
				level: 0,
				userList: [],  // 原始数据
				userList2: [],  // 显示的数据
				temp_vip: 0,
				temp_level: 0,
				selected_uid: 0,
				search_input:'',
			}
		},
		onLoad(option) {
			this.level = option.level
			this.get_user()
		},
		methods: {
			search(){
				this.userList2 = []; 
				var value = this.search_input;
				var num = parseInt(value) || -1;
				for(var i=0; i<this.userList.length; i++){
					var user = this.userList[i];
					if(user.uid==num || user.username.indexOf(value) != -1 ){
						this.userList2.push(user)
					}
				}
			},
			reset(){
				this.search_input='';
				this.userList2 = this.userList;
			},
			delete_user(i){
				uni.showModal({
					title:"确认删除？ " + this.userList[i].username,
					success: (r) => {
						if (r.confirm){
							this.selected_uid=this.userList[i].uid;
							this.myReq({
								url: "delete_user?uid="+this.selected_uid
							}).then((res)=>{
								if(res.data){
									uni.showToast({
										title:"成功"
									})
									this.get_user()
								}
							})
						}
					}
				})
			},
			change_level(i){
				this.selected_uid=this.userList[i].uid;
				this.temp_level=this.userList[i].level;
				this.$refs.popup_level.open()
			},
			change_vip(i){
				this.selected_uid=this.userList[i].uid;
				this.temp_vip=this.userList[i].grade;
				this.$refs.popup_vip.open()
			},
			confirm_vip(done,value){
				if ( ! parseInt(value.trim())   || parseInt(value.trim())<1 || parseInt(value.trim())>3 ){
					uni.showToast({
						title: '请输入一个1-3整数',
					})
					return;
				}
				this.myReq({
					url: "vip_user",
					method:"POST",
					data: JSON.stringify({
						uid: this.selected_uid,
						vip: parseInt(value.trim())
					})
				}).then((res)=>{
					if(res.data){
						uni.showToast({
							title: '成功',
						})
						this.get_user()
					}
				})
				done()
			},
			confirm_level(done, value){
				var level = parseInt(value.trim());
				if ( ! level && level!=0 ){
					uni.showToast({
						title: '请输入一个 -1 到 14 整数',
					})
					return;
				}
				if ( level < -1 || level>=15){
					uni.showToast({
						title: '请输入一个 -1到14的正整数',
					})
					return;
				}
				if(this.level != 15  && (level != -1 && level != 0) ){
					uni.showToast({
						title: '普通管理员只能输入-1封号,和0解封',
					})
					return
				}
				this.myReq({
					url: "make_admin",
					method:"POST",
					data: JSON.stringify({
						uid: this.selected_uid,
						level: level
					})
				}).then((res)=>{
					if(res.data){
						uni.showToast({
							title: '成功',
						})
						this.get_user()
					}
				})
				done()
			},
			get_user(){  // 获取所有被管理的用户
				this.myReq({
					url: 'get_all_user',
				}).then((res)=>{
					console.log(res.data);
					if(res.data){
						this.userList=res.data;
						this.userList2 = this.userList; 
					}
				})
			}
		}
	}
</script>

<style>

.card{
	border-radius: 20rpx;
	background-color: #F0E68C;
	border: 5rpx solid #007AFF;
	margin-bottom: 20rpx;
}
.small_btn{
	display: inline-block;
	background-color: #4CD964;
	border-radius: 20rpx;
	font-size: 30rpx;
	margin-right: 20rpx;
}
.label{
	display: inline-block;
	background-color: #F0AD4E;
	font-size: 30rpx;
	margin-right: 20rpx;
}
.red{
	background-color: #FF0f5f;
}
.seach{
	margin: 10rpx;
	border-radius: 10rpx;
	border: 2rpx solid #DD524D;
	background-color: #F8F8F8;
}
</style>
